<template>
	<view class="question" @click="toDetail">
		<view class="questionMain">
			<view
				style="background: rgba(242, 242, 242, .56);box-shadow: 0 0 10rpx rgba(204, 204, 204, .35);border-radius: 14rpx;padding-left: 30rpx;padding-right: 30rpx;padding-bottom: 40rpx;">
				<view class="queHeader justConBetween" @click.stop="toHomePage"
					style="display: flex;justify-content: space-between;align-items: center;">
					<view class="flex alignCenter" style="margin-top: 20rpx;">
						<view class="avatar">
							<image :src="quesItem.createUserAvatar?quesItem.createUserAvatar:'https://image.alhelp.net/uploads/20231104/4d491857ac50d21ebbcb25ff5bc254f8.png'"
								mode="widthFix">
							</image>
						</view>
						<view style="margin-left: 20rpx;">
							<view class="font14 userName">{{quesItem.createUserName?quesItem.createUserName:'匿名用户'}}</view>
							<view class="font12 flex alignCenter">
								<view class="">
									<view class="color999 time">{{quesItem.createTime}}</view>
								</view>
							</view>
						</view>
					</view>
					<view style="color: #fe8428;font-size: 28rpx;">
						￥{{quesItem.bounty || 0}}元
					</view>
					<view class="focus bold font12" v-if="(!quesItem.isLikedUser && !isMine)" @click.stop="focusClick"><text
							class="focusMargin">+</text>关注</view>
				</view>
				<view class="quesTitle font16 bold hiddenTwoline">{{quesItem.title}}</view>
				<!-- 打卡（笔记）内容 -->
				<!-- 标签价格 -->
				<view class="flex alignCenter justConBetween tagBox">
					<view class="tag colorBlue font12">
						<text v-for="(item,index) in quesItem.objectNames" :key="index">{{item}}</text>
					</view>
					<!-- 悬赏 -->
					<!-- 打卡内容 可无 -->
					<view class=""></view>
					<!-- 提问内容 图文、视频 -->
				</view>
			</view>

			<view class="quesOper flex alignCenter justConBetween">
				<view class="font14 color999">已有<text
						class="colorLightOrange bold mathMagrin">{{quesItem.answerTotal}}</text>人回答
				</view>
				<view class="flex alignCenter justConEnd operMain">
					<view class="noWidthBtn" @click.stop="hotOper">
						<image src="@/static/image/icons/edit.png" mode="widthFix"></image>
						<text class="font12">回答</text>
					</view>
					<view class="noWidthBtn" @click.stop="goShare">
						<image src="https://image.alhelp.net/uploads/20231104/db05a877babde8bbcce75893aced0760.png" mode="widthFix"></image>
						<text class="font12">邀请回答</text>
					</view>
				</view>
			</view>
			<!-- 提示区域 -->
			<view class="colorccc font14 flex" style="margin-top: 40rpx;margin-bottom: 0;">
				<uni-icons type="info-filled" color="#ccc" size="20"></uni-icons>
				<view class="">如果答案被选中，将被隐藏，其他人如果要看，会出1元钱，其中一半给提问者，一半给回答者！</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		focusUser
	} from "@/api/index.js"
	import {
		payBeforeTip,
		navigateLoginPage
	} from "@/utils/common.js"
	export default {
		name: "uni-questionhot",
		props: {
			quesItem: {
				type: Object,
				default () {
					return {}
				}
			},
			// 根据弹框组件的展示决定是否显示video，以解决video原生组件层级太高没办法覆盖又不想重写nvue页面
			showVideo: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				isMine: false,
				brand: ''
			};
		},
		created() {
			this.brand = uni.getStorageSync('brand')
			this.isMine = (this.quesItem.createUserId == uni.getStorageSync('userId'))
		},
		methods: {
			hotOper() {
				if (!uni.getStorageSync('token')) {
					navigateLoginPage()
					return
				}
				let query = {
					id: this.quesItem.id,
					title: this.quesItem.title
				}
				uni.navigateTo({
					url: '/pages/send/answer/answer?query=' + JSON.stringify(query)
				})
			},
			// 进到提问详情定位到改答案位置
			toSeeDetail() {
				let item = {
					id: this.quesItem.id,
					questionId: this.quesItem.questionId
				}
				uni.navigateTo({
					url: `/pages/send/question/questionDetail/questionDetail?item=${JSON.stringify(item)}`
				})
			},
			// 查看最佳答案
			toBestAnswer() {
				//支付一元查看，提问和最佳回答各分一半
				let param = {
					id: this.quesItem.answerId,
					isBestBuy: this.quesItem.isBestBuy,
					quesTitle: this.quesItem.title
				}
				payBeforeTip(param)
				// uni.navigateTo({
				// 	url:`/pages/send/question/questionDetail/questionDetail?item=${JSON.stringify(this.quesItem)}`
				// })
			},
			goShare() {
				if (!uni.getStorageSync('token')) {
					navigateLoginPage()
					return
				}
				// inviteType 1提问者邀请；2最佳回答者邀请；3普通用户的提问邀请；4邀请加入小组；5任务打卡邀请
				let inviteType = ''
				if (this.quesItem.createUserId == uni.getStorageSync('userId')) {
					inviteType = 1
				} else if (this.quesItem.bestUserId == uni.getStorageSync('userId')) {
					inviteType = 2
				} else {
					inviteType = 3
				}
				let query = {
					id: this.quesItem.id,
					questionId: this.quesItem.questionId,
					inviteType: inviteType

				}
				uni.navigateTo({
					url: '/pages/school/share/share?query=' + JSON.stringify(query)
				})
			},
			// 去用户主页
			toHomePage() {
				uni.navigateTo({
					url: '/pages/mine/homePage/homePage?userId=' + this.quesItem.createUserId
				})
			},
			toDetail() {
				let item = {
					id: this.quesItem.id,
					questionId: this.quesItem.questionId
				}
				uni.navigateTo({
					url: `/pages/send/question/questionDetail/questionDetail?item=${JSON.stringify(item)}`
				})
			},
			// 去任务详情
			toTaskDetail() {
				uni.navigateTo({
					url: '/pages/send/task/taskDetail/taskDetail?id=' + this.quesItem.taskId
				})
			},
			// 关注事件
			focusClick() {
				if (this.quesItem.createUserId == uni.getStorageSync('userId')) {
					uni.showToast({
						title: '亲，这是你自己哦',
						icon: 'none'
					})
					return
				}
				let param = {
					isAdd: !this.quesItem.isLikedUser,
					fansUserId: this.quesItem.createUserId,
					fansUserName: this.quesItem.createUserName,
					fansUserAvatar: this.quesItem.createUserAvatar,
				}
				focusUser(param).then((res) => {
					if (res.code == 100000) {
						this.quesItem.isLikedUser = !this.quesItem.isLikedUser
						let emitObj = {
							type: 'focus',
							userId: this.quesItem.createUserId,
							status: this.quesItem.isLikedUser
						}
						this.$emit('quesOper', emitObj)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "@/static/public.scss";

	.questionMain {
		// background: rgba(242, 242, 242, .56);
		padding: 0 30rpx 30rpx;
		box-sizing: border-box;
		position: relative;
		// box-shadow: 0 0 10rpx rgba(204, 204, 204, .35);
		// border-radius: 14rpx;

		.posTag {
			position: absolute;
			top: 0;
			right: 30rpx;
			text-align: center;

			image {
				width: 60rpx;
				height: 60rpx;
			}

			text {
				display: inline-block;
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				top: 0;
				margin: auto;
				line-height: 50rpx;
			}
		}
	}

	.queHeader {
		margin: 0 0 20rpx;
		padding: 10rpx 0 0;

		.avatar {
			width: 100rpx;
			height: 100rpx;
			flex-shrink: 0;
			// margin-top: -60rpx;//之所以是60是因为父元素还有个10rpx的paddingTop
			position: relative;

			image {
				border-radius: 50%;
				width: 100%;
				height: 100%;
			}

			.focus {
				position: absolute;
				bottom: -10rpx;
				left: 15%;
				width: 70%;
				background: $colorred;
				border-radius: 20rpx;
				height: 35rpx;
				line-height: 35rpx;
				text-align: center;
				color: #fff;
				z-index: 10;
			}
		}

		.time {
			margin-right: 10rpx;
		}

		// 与头像水平对齐的关注样式
		.focus {
			background: $colorred;
			color: #fff;
			padding: 8rpx 20rpx;
			border-radius: 40rpx;
			text-align: center;
		}
	}

	.note {
		background: $pageBgColor;
		border-radius: 8rpx;
		padding: 20rpx;
		box-sizing: border-box;
		margin: 20rpx 0 0;

		.tag {
			background: $colorMain;
			border-radius: 5rpx;
			padding: 0 10rpx;
			margin-right: 10rpx;
			flex-shrink: 0;
		}

		image {
			width: 100rpx;
			height: 100rpx;
			margin: 0 10rpx 0 0;
			flex-shrink: 0;
			border-radius: 10rpx;
		}
	}

	.tagBox {
		margin: 30rpx 0 0;

		.tag {
			text {
				display: inline-block;
				margin-right: 30rpx;
			}

			text:last-child {
				margin-right: 0;
			}
		}

		.reward {
			flex-shrink: 0;
		}
	}

	.quesCon {
		.richSelf {
			filter: blur(2px);
			max-height: 100rpx;
		}

		.richBox {
			// max-height: 100rpx;
			overflow: hidden;
			margin: 0 0 20rpx;
			position: relative;

			// .richSelf{
			// 	filter: blur(2px);
			// }
			.seeDetail {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: rgba(0, 0, 0, .1);
				text-align: center;
				line-height: 100rpx;

				text {
					border-radius: 40rpx;
					background: rgba(0, 0, 0, .3);
					padding: 8rpx 30rpx;
				}
			}

			.quesContent {
				max-height: 80rpx;
			}
		}

		.noWidthBtn {
			width: 40%;
			padding: 15rpx 0;
			margin: 0 auto 30rpx;
		}
	}

	.audioBox {
		max-height: 400rpx;

		audio {
			width: 100%;
		}

		::v-deep .uni-audio-default {
			width: 100%;
		}
	}

	.videoBox {
		max-height: 400rpx;

		video {
			width: 100%;
			height: 200rpx;
		}
	}

	.quesOper {
		margin: 30rpx 0 10rpx;

		image {
			width: 30rpx;
			height: 30rpx;
			margin: 0 8rpx 0 0;
		}

		.operMain {
			&>view {
				margin-left: 30rpx;
				height: 64rpx;
				line-height: 64rpx;
				padding: 0;
				width: 150rpx;
				box-sizing: border-box;
				box-shadow: 0 6rpx 10rpx rgba(153, 153, 153, .35);

				image {
					vertical-align: middle;
				}
			}
		}
	}
</style>